// resolve 用来拼接绝对路径的方法
const { resolve } = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin');

// html-webpack-plugin
// new htmlWebpackPlugin()   功能：默认会创建一个空的html文件，不会自动引入打包输出的所有资源（js/css）
const htmlPlugin = new htmlWebpackPlugin({
    // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（js/css）
    template: './src/index.html',
    filename: 'index.html'
});


module.exports = {
    // webpack 配置
    // 入口起点
    entry: ['./src/index.js','./src/index.html'],
    // 输出
    output: {
        // 输出文件名
        filename: 'build.js',
        // __dirname 是nodejs的变量，代表当前文件的目录的绝对路径,相当于【./】
        // resolve(__dirname,'build') 方法就相当于将这两个目录拼接起来
        path: resolve(__dirname, 'build')
    },
    // loader 配置
    module: {
        // npm i style-loader css-loader less-loader url-loader file-loader -D
        rules: [
            // 详细的loader配置

            // 处理 css 文件打包的加载器，加载器的顺序不能乱写
            // 加载器是按照顺序调用（从后往前调用，css-loader->style-loader）
            {
                test: /\.css$/,
                use: [
                    'style-loader', // 创建style标签，将js中的样式资源插入进去，添加到head中生效
                    'css-loader', // 将css文件变成 commonjs 模块加载到js中，里面内容是样式字符串
                    // 'postcss-loader' // 是处理兼css的部分兼容问题
                ]
            },
            // 处理 less 文件打包的加载器
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader' // 将less文件编译成css文件
                ],
            },
            // 处理图片相关的加载器， limit 是用来指定图片大小的，单位是 byte ，
            // 只有小于 limit 大小的图片，才会被转换为 base64 图片
            // 这个图片loader需要下载两个loader,因为 url-loader 依赖于 file-loader
            {
                test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2/,
                // 注：【当loader只有一个时可以使用方式二的模式写，如果有多个并且有不同的参数可以使用方式一】
                // 方式一配置
                // use: ['url-loader?limit=8192&esModule=false&name=[hash:10].[ext]&outputPath=images']
                // 方式二配置
                loader: 'url-loader',
                options: {
                    // 图片大小小于8kb，就会被base64处理
                    // 优点：减少请求数量【减轻服务器压力】
                    // 缺点：图片体积会更大【文件请求速度更慢】
                    limit: 8 * 1024,
                    // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
                    // img 标签进行解析时就会出现 src="[object Module]"
                    // 解决方案：关闭 url-loader 的es6模块化,使用commonjs来进行解析
                    esModule: false,
                    // 给图片进行重命名
                    // [hash:10] 取图片的hash值的前10位
                    // [ext] 取文件原来扩展名
                    name: '[hash:10].[ext]',
                    outputPath: 'images',
                },
            },
            {
                test: /\.html$/,
                loader: 'html-loader' // 处理html文件中的img图片，【负责引入img,从而能被url-loader进行处理】
            },
            {
                exclude: /\.(css|less|js|html|jpg|png|gif|bmp|ttf|eot|svg|woff|woff2)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]',
                    outputPath: 'media',
                }
            }
        ]
    },
    plugins: [
        // 详细的plugins的配置
        htmlPlugin
    ],
    mode: 'development', // 开发模式
    // mode: 'production', // 生产模式

    // 开发服务器 devServer ： 用来自动化【自动编译，自动打开浏览器，自动刷新】
    // 只会在内存中编译打包，不会有任何输出
    // 启动devServer指令： npx webpack-dev-server 

    devServer: {
        contentBase: resolve(__dirname, 'build'),
        // 启动gzip压缩
        compress: true,
        // 端口号
        port: 3000,
        // 是否自动打开默认浏览器
        open: false,
        hot: true
    },
    /*
    HMR ： hot module replacement 热模块替换/模块热替换
        作用：一个模块发生变化，智慧重新打包这一个模块（而不是打包所有模块）
            极大的提升构建速度
        开启：  hot: true

        样式文件： 可以使用HMR功能：因为style-loader内部实现了~
        js文件： 默认不能使用HMR
            处理方式： 修改js代码，添加支持HMR的代码
            注意：入口文件【entry里面的值】是不能做HMR处理的
        html文件： 默认不能使用HMR，同时HMR不能进行热更新
            处理方式： 修改 entry 为数组，并将html文件引入
    */
}

